<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout</title>

<script src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js" ></script>
  <link rel="stylesheet" href="lib/jquery.ui-1.0/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="lib/jquery.ui-1.0/jquery.dimensions.js"></script>
<script  src="lib/jquery.ui-1.0/ui.mouse.js"></script>
<script  src="lib/jquery.ui-1.0/ui.resizable.js"></script>
<script src="lib/jquery.ui-1.0/ui.draggable.js"></script>
<script src="lib/jquery.ui-1.0/ui.draggable.ext.js"></script>

<style type="text/css">
<!--
.control {
	background-image: url(images/shadow.png);
	background-position: right bottom;
	padding-right: 6px;
	padding-bottom: 6px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
#base_outline {
	position:absolute;
	left:104px;
	top:56px;
	width:541px;
	height:596px;
	z-index:1;
}
#menu {
	position:absolute;
	left:720px;
	top:52px;
	width:198px;
	height:271px;
	z-index:2;
}
.outline {
	border: 1px solid #333333;
}
#Layer1 {
	position:absolute;
	left:700px;
	top:400px;
	width:195px;
	height:206px;
	z-index:1;
	}
#base {
	height: 100%;
	width: 100%;
}
.grid_black {
	background: url("images/grid_black.png");
	
}
.dd-demo {
    position:relative;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:60px;
    width:60px;
}
#wiget1 {
	left:1px;
	top:222px;
	width:142px;
	height:144px;
	z-index:11;
}
#base_dashboard {
	width: 100%;
	height: 90%;
}
.editable_in {
	border: 2px solid #ff0000;

}
#resize {
	position:absolute;
	left:10px;
	top:10px;
	cursor: se-resize;
	z-index:3;
}
-->
</style>
<script type="text/javascript">

	function output_this_page(){
		
		
		alert($(".editable").serialize());
		

	}	

</script>
<script type="text/javascript">
	function setEditable(){
		
			
			$(".editable").mouseover(function(){
				if($("#"+this.id).hasClass("editable_in")) return;
				$("#"+this.id).resizableEnable();
				$("#"+this.id).addClass("editable_in");
			
				
			});
			$(".editable").click(function(){
 
			})
			
			
			$(".editable").mouseout(function(){
				$("#"+this.id).resizableDisable();
				$("#"+this.id).removeClass("editable_in");
				
			});
			
			
			
			
			
		
	}
	
	YAHOO.util.Event.onDOMReady(function(){
		$(".movable").draggable();
		$(".editable").resizable();
		
	});
	
</script>
<script src="complete.js" ></script>




</head>

<body onload="setEditable();">
<div id="resize">
	<img id="aaa" src="/layout/images/resize.png" width="22" height="22" />
</div>

<div class="outline editable movable" id="base_outline">
<br />
<br /><br />
<div class="outline editable movable" id="2base_outline2">하ㅓ하하
</div>

</div>


<div class="movable control" id="menu">
  <p>아이템 넣기</p>
  <p><a href="#" onclick="javascript:apply_grid(1);">룰러 적용</a></p>
  <p>그리드 적용</p>
  <p><a href="#" onclick="javascript:output_this_page();" >현재 페이지 출력</a></p>
</div>

<div id="Layer1" class="control movable">
  <label></label>
  <form id="form1" name="form1" method="post" action="">
    <label>left
    <input name="control_style_left" type="text" id="control_style_left" />
    </label>

    
    <p><label>top
        <input name="control_style_top" type="text" id="control_style_top" />
    </label>
    </p>
    <p>
      <label>width
      <input name="control_style_width" type="text" id="control_style_width" />
      </label>
    </p>
    <p>
      <label>height
      <input name="control_style_height" type="text" id="control_style_height" />
      </label>
    </p>
    <hr />
    <p>
      <label>
      <input type="submit" name="Submit" value="Submit" />
      </label>
      <label>
      <input type="reset" name="Submit2" value="Reset" />
      </label>
    </p>
  </form>

</div>
</body>
</html>
